<template>
	<view class="">

		<view class="list" v-if="list.length > 0">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="s1" @click="goInfo(item)">
					<image :src="item.activity.share_image_url"></image>
					<view class="tit">{{ item.activity.title }}</view>
				</view>

				<view class="s2">
					<view class="c1">
						<view class="e1">
							<text>状态：</text>
							<text :class="'status_' + item.status">{{ item.status_text }}</text>
						</view>
						<view class="e2" @click="goAddress(1,item)" v-if=" ![2,3].includes(item.status)">请设置取货方式</view>
						<!-- <view class="e2" @click="goAddress(index)" v-if="item.take_over_name == ''">请完善收货信息</view>
						<view class="e2" @click="onTake(item, index)"
							v-if="item.take_over_name != '' && item.status == 1">发货前可修改收货信息</view> -->
					</view>

					<view class="c2">
						<text class='e1' v-if="item.status == 1">查看发货信息</text>
						<text class='e2' v-else @click="sInfo(item)">查看发货信息</text>
					</view>
				</view>
			</view>

		</view>

		<view class="empty" v-else>
			<u-empty mode="order" text="订单为空"></u-empty>
		</view>

		<u-popup :show="take_show" mode='center' @close="onClose" bgColor="transparent">
			<view class="take_over">
				<view class="c1">姓名</view>
				<view class="c2">
					<u--input v-model='row.take_over_name' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
					</u--input>
				</view>

				<view class="c1">联系方式</view>
				<view class="c2">
					<u--input v-model='row.take_over_tel' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
					</u--input>
				</view>

				<view class="c1">收货地址</view>
				<view class="c2">
					<u--input v-model='row.take_over_address' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
					</u--input>
				</view>

				<view class="but" @click="onSend()">
					<text>保存</text>
				</view>

			</view>
		</u-popup>

		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				list: [],
				page: 1,
				stop_loading: false,
				take_show: false,
				take_info_show: false,
				take_row_index: 0,
				row: {},
				info: {},
				Delivery: {},
			};
		},
		destroyed() {
			console.log(122);
			uni.$off('updateAddress')
		},
		mounted() {
			this.loadmore();
			uni.$on('updateAddress', (item) => {
				this.list[item.index].take_over_name = item.take_over_name
			})
		},
		onReachBottom() {
			console.log('加载到底部')
			this.loadmore();
		},
		methods: {
			setType(type) {
				this.type = type
				this.page = 1;
				this.stop_loading = false;
				this.loadmore();
			},
			loadmore() {
				console.log(11);
				let that = this
				let params = {
					type: this.type,
					page: this.page,
				};
				if (this.stop_loading) {
					return;
				}
				uni.showLoading();
				this.$API.getUserActivity(params).then(res => {
					if (this.page == 1) {
						this.list = [];
					}
					res.data.data.forEach(v => {
						this.list.push(v)
					});
					console.log(res.data.last_page)
					if (res.data.last_page <= this.page) {
						that.stop_loading = true;
					}
					this.page += 1;
					uni.hideLoading();
				}).catch(err => {
					console.log('err', err);
					uni.hideLoading();
				})
			},
			onClose() {
				this.take_show = false;
			},
			onTake(item, index) {
				console.log(item, index)
				this.row = item
				this.take_row_index = index;
				this.take_show = true
			},
			goAddress(type = 0, item) {
				if (type) {
					uni.navigateTo({
						url: '/pages/my/address_way?id=' + item.id,
					})
					return
				}
				uni.navigateTo({
					url: '/pages/my/address',
				})
			},
			onSend() {
				this.$API.sendOrderTake(this.row).then(res => {
					uni.showToast({
						title: '保存成功',
					})
					this.take_show = false;
					this.list[this.take_row_index] = this.row;
				}).catch(err => {

				})
			},
			onDelivery() {
				this.$API.getUserAddress().then(res => {
					this.row.take_over_name = res.data.delivery_name;
					this.row.take_over_tel = res.data.delivery_phone;
					this.row.take_over_address = res.data.delivery_district + ' ' + res.data.delivery_address;
				})
			},
			sInfo(item) {
				uni.navigateTo({
					url: '/pages/my/out_info?id=' + item.id,
				})
			},
			goInfo(item) {
				uni.navigateTo({
					url: '/pages/activity/info?es=2&id=' + item.activity_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-list {
		height: auto !important;
	}

	.nav {
		@include flex;
		justify-content: space-between;
		height: 84rpx;
		border-radius: 48rpx;
		background-color: #E6EDF5;
		padding: 6rpx 8rpx;
		margin-top: 52rpx;

		.s1 {
			width: 164rpx;
			height: 84rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #0A1629;
			line-height: 84rpx;
			text-align: center;

			&.active {
				background-color: #7677EB;
				color: #FFFFFF;
			}
		}
	}

	.list {
		@include flex(column);
		padding-bottom: 36rpx;

		.item {
			height: 418rpx;
			background-color: #FFF;
			border: 2rpx solid #7677EB;
			padding: 24rpx 22rpx;
			border-radius: 48rpx;
			margin-top: 26rpx;

			.s1 {
				height: 360rpx;
				position: relative;

				image {
					width: 100%;
					height: 360rpx;
					position: absolute;
					border-radius: 24rpx;
				}

				.tit {
					position: absolute;
					display: flex;
					align-items: center;
					justify-content: center;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					// bottom: 0;
					width: 88%;
					padding: 20rpx 6% 0;
					height: 100%;
					border-radius: 0 0 24rpx 24rpx;
					background: linear-gradient(360deg, #31353D 0%, rgba(0, 0, 0, 0) 100%);
					// background-color: red;
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 600;
					color: #FFFFFF;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.s2 {
				width: 628rpx;
				height: 32rpx;
				margin-top: 24rpx;
				line-height: 32rpx;
				@include flex;
				justify-content: space-between;
				position: relative;
				font-size: 24rpx;

				.c1 {
					@include flex;

					.e1 {
						margin-right: 34rpx;
						color: #9E9E9E;
					}

					.e2 {
						color: #7677EB;
					}
				}

				.c2 {
					color: #9E9E9E;

					.e2 {
						color: #7677EB;
					}
				}
			}
		}
	}

	.empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.take_over {
		width: 566rpx;
		padding: 0 52rpx 52rpx 52rpx;
		background-color: #fff;
		border-radius: 48rpx;

		.s1 {
			width: 100%;
			height: 34rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #7677EB;
			line-height: 34rpx;
			text-align: center;
		}

		.title {
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #110202;
			line-height: 52rpx;
			text-align: center;
			margin-top: 16rpx;
		}

		.c1 {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #7D8592;
			line-height: 28rpx;
			margin-top: 56rpx;
		}

		.c2 {
			width: 566rpx;
			height: 100rpx;
			margin-top: 40rpx;

			/deep/ .u-input {
				height: 98rpx;
				border-radius: 28rpx;
			}
		}
	}


	.but {
		margin-top: 60rpx;
		width: 290rpx;
		height: 96rpx;
		background: #7677EB;
		box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
		border-radius: 28rpx;
		margin: 60rpx auto 0 auto;
		text-align: center;

		text {
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 96rpx;
		}
	}
</style>